<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script th:src="@{/js/jquery-3.6.3.js}"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
          integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossOrigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
          integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
          crossOrigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
            crossOrigin="anonymous"></script>
</head>
<body>
<div class="jumbotron jumbotron-fluid">
    <div class="container">
        <h1 style="color: orange" class="display-4">自如客</h1>
        <p style="color: orange" class="lead">做全世界受人尊重和喜爱的,提供高品质居住体验的科技公司-----ziroom</p>
        <a href="/">返回首页</a>
    </div>
</div>
<div class="card">
    <div>
        <h1 class="card-header" style="color: orange">个人中心</h1>
        <div class="card-body c">
            <h3 class="card-title">我的信息</h3>
            <form method="post" action="/ziroom_portal/user/update">
                <div class="container">
                    <div class="row">


                        <div class="col-9">
                            <fieldset id="changeP" disabled>

                                <p>
                                    我的昵称<input type="text" class="form-control" th:value="${user.getName()}"
                                                   name="name">
                                </p>
                                <p>
                                    我的生日<input type="date"  class="form-control"
                                                   th:value="${#dates.format(user.birth,'yyyy-MM-dd')}" name="birth">
                                </p>
                            </fieldset>
                            <p>
                                我的电话<input type="text" th:value="${user.getPhone()}" class="form-control" disabled>
                            </p>
                            <a class="btn" style="border: orange 1px solid"
                               onclick="changeShow()">信息有误点击立即修改</a>
                            <button type="submit" class="btn btn-success" id="saveInfo"
                                    style="border: #7abaff 1px solid"
                                    hidden="hidden">立即保存
                            </button>
                        </div>
                        </fieldset>

                    </div>

                    <hr>
                </div>
            </form>

            <div th:if="${room}==null">
                <h3 class="card-title">我的房子</h3>
                <a href="/showRoom.html">立刻去找房吧</a>
            </div>

            <div th:if="${room}!=null">
                <h3 class="card-title">我的房子</h3>
                <div class="container">
                    <div class="row">
                        <div class="col-3">
                            <img style="width: 200px;height: 200px"
                                 th:src="'http://139.224.186.148:10001/imgs/room/roomImgs/'+${room.getImg()}">
                        </div>
                        <div class="col-9">
                            <p th:text="'我的房屋地址是:'+${room.getQname()}+${room.build}+'栋'+${room.getNumber()}+'号'"></p>
                            <p th:text="'我的房屋类型是:'+${room.roomtype}"></p>
                            <p th:text="'我的房屋租金是:'+${room.rent}"></p>
                            <p th:text="'我的签约时间是:'+${#dates.format(room.ustart,'yyyy-MM-dd')}"></p>
                            <p th:text="'我的到期时间是:'+${#dates.format(room.uend,'yyyy-MM-dd')}"></p>
                            <button type="button" class="btn btn-primary" data-toggle="modal"
                                    data-target="#exampleModal">
                                提前退租
                            </button>
                            <button type="button" class="btn btn-success" data-toggle="modal"
                                    data-target="#exampleModal1">
                                立即续租
                            </button>

                        </div>

                    </div>
                    <hr>
                </div>

                <!-- 退房模态窗 -->
                <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                     aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">违约金缴纳</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <span>提前解约需支付当前月租金的违约金:</span>
                                <span style="font-size: 20px;color:red;" th:text="${room.rent}"></span>
                                <span>元</span>
                                <p style="color: green">ps.如果剩余租约不足30天,可直接退租</p>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">再考虑一下</button>
                                <button type="button" class="btn btn-primary" onclick="Renting()">立即退租</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 续约模态窗 -->
                <div class="modal fade" id="exampleModal1" tabindex="-1" aria-labelledby="exampleModalLabel1"
                     aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel1">续约详情</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <span>提前续约可以享受原价续约:</span>
                                <span style="font-size: 20px;color:red;" th:text="${room.rent}"></span>
                                <span>*12月=</span>
                                <span style="font-size: 20px;color:red;" th:text="${room.rent}*12"></span>
                                <span>元</span>
                                <p style="color: green">ps.如果剩余租约不足30天,可直接退租</p>

                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">再考虑一下</button>

                                <button type="button" class="btn btn-primary" onclick="Renewal()">立即续约</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>

</div>


</body>
<script>


    function changeShow() {
        $("#changeP").removeAttr("disabled")
        $("#saveInfo").removeAttr("hidden")
    }

    function Renewal() {
        location.href = "/ziroom_portal/user/goToPayRenewal"
    }

    function Renting() {
        location.href = "/ziroom_portal/user/goToPayRenting"
    }

</script>

</html>